<template>
  <div>
    <a-modal :visible="visible" :destroyOnClose="true" title="资源位管理" :footer="null" :width="600" @cancel="visible = false">
      <a-select style="width: 240px" v-model="channel" @change="handleChange">
        <a-select-option :value="item.appId" v-for="item in env === 'production' ? brandListPro : brandList" :key="item.appId">{{ item.brandName }}</a-select-option>
        <!-- <a-select-option value="lucy">LESS</a-select-option>
        <a-select-option value="disabled">JNBYHOME</a-select-option>
        <a-select-option value="Yiminghe">速写</a-select-option>
        <a-select-option value="ja11ck">jnbybyJNBY</a-select-option>
        <a-select-option value="lu22cy">APN</a-select-option>
        <a-select-option value="di222sabled">蓬马</a-select-option>
        <a-select-option value="444">奥莱</a-select-option>
        <a-select-option value="2323">江南布衣+</a-select-option> -->
      </a-select>
      <a-spin :spinning="spinning">
        <h3 style="margin-top: 16px">位置</h3>
        <ol class="list">
          <li><span class="name">个人中心-头部背景图</span></li>
          <li><span class="name">个人中心-九宫格</span></li>
          <template v-if="list.length">
            <li>
              <span class="name">个人中心-资源位一</span>
              <span class="num">坑位数量： <a-input-number :min="1" :max="10" v-model="position3.pitNum" :formatter="limitNumber" :parser="limitNumber" /></span>
              <span class="num"
                >自动轮播：
                <a-select v-model="position3.hasCarousel" style="width: 70px">
                  <a-select-option :value="1">是</a-select-option>
                  <a-select-option :value="0">否</a-select-option>
                </a-select>
              </span>
            </li>
            <li>
              <span class="name">个人中心-资源位二</span>
              <span class="num">坑位数量： <a-input-number :min="1" :max="10" v-model="position4.pitNum" /></span>
              <span class="num"
                >自动轮播：
                <a-select v-model="position4.hasCarousel" style="width: 70px">
                  <a-select-option :value="1">是</a-select-option>
                  <a-select-option :value="0">否</a-select-option>
                </a-select>
              </span>
            </li>
            <li>
              <span class="name">权益中心-资源位</span>
              <span class="num">坑位数量： <a-input-number :min="1" :max="10" v-model="position5.pitNum" /></span>
              <span class="num"
                >自动轮播：
                <a-select v-model="position5.hasCarousel" style="width: 70px">
                  <a-select-option :value="1">是</a-select-option>
                  <a-select-option :value="0">否</a-select-option>
                </a-select>
              </span>
            </li>
          </template>
        </ol>
        <p style="color: #f5222d">注：坑位数量只能填正整数，最多是10</p>
      </a-spin>
      <a-button type="primary" @click="onSubmit" style="display: block; margin: 0 auto">保存设置</a-button>
    </a-modal>
  </div>
</template>
<script>
import { posManagerList, posManagerBatchUpdate } from '@/api/marketingCenter/memberTask'
import { mixin } from '../mixin'
export default {
  mixins: [mixin],
  data() {
    return {
      visible: false,
      spinning: false,
      channel: 'wxf0f82c869337dd3b',
      list: [],
      position3: {},
      position4: {},
      position5: {},
      env: process.env.NODE_ENV
    }
  },
  methods: {
    show() {
      this.visible = true
      this.fetchData()
    },
    fetchData() {
      this.spinning = true
      let params = {
        requestData: {
          appId: this.channel
        }
      }
      posManagerList(params).then(res => {
        if (res.code == 0) {
          this.list = res.data
          this.position3 = res.data.filter(e => e.position == 3)[0]
          this.position4 = res.data.filter(e => e.position == 4)[0]
          this.position5 = res.data.filter(e => e.position == 5)[0]
        }
        this.spinning = false
      })
    },
    handleChange(value) {
      this.channel = value
      this.fetchData()
    },
    limitNumber(value) {
      if (typeof value === 'string') {
        return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
      } else if (typeof value === 'number') {
        return !isNaN(value) ? String(value).replace(/\./g, '') : 0
      } else {
        return 0
      }
    },
    close() {
      this.visible = false
    },
    onSubmit() {
      console.log(this.position3, this.position4, this.position5)
      let newList = [this.position3, this.position4, this.position5]
      let params = {
        requestData: newList
      }
      posManagerBatchUpdate(params).then(res => {
        if (res.code == 0) {
          this.$message.success('设置成功')
          this.close()
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  margin-bottom: 12px;
  li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    .name {
      width: 140px;
      flex: 0 1 auto;
    }
    .num {
      margin-left: 16px;
    }
  }
}
</style>

